import './App.css';
import React from 'react';
import { Button, Space } from 'antd';
import { Route } from 'react-router-dom';
import Home from './components/Home/Home';
import About from './components/About/About';
import Menu from './components/Menu/Menu';
import InlayPattern from './components/InlayPattern/InlayPattern'
import MyForm from './components/MyForm/MyForm'

function App() {
  return (
    // React.Fragment
    // 一个专门作为父容器的组件

    /**
     * Route
     * @param {String} path 映射的url地址
     * @param {String} component 要挂载的组件
     * @param {Boolean} exact 路径是否完整匹配
     * 默认情况下为模糊匹配， URL地址头部与path一致就会挂载
     * 
     * component 构建组件，通过 props 自动传参
     * @param {Object} match    匹配的信息
     *    isExact  检查是否完全比配
     *    params   请求参数 eg：/about/:id
     * @param {Object} location 地址信息
     * @param {Object} history  历史记录信息
     *    push()   跳转页面
     *    replace()替换页面
     *    eg：props.history.push/replace({pathname:'/about/2',state:{name:'张三'}})
     * 
     * render
     * @param {Function} callback 作为组件的方式挂载
     * 不会自动传递component 的三个属性
     * 
     * children
     * 1.和render类似，传递callback, 无论组件路径是否匹配都会挂载
     * 2.直接传递组件
     * 使用钩子函数 => const match = useRouteMatch()
     *                 const location = useLocation()
     *                 const history = useHistory()
     *                 const params = useParams()
    */
    <React.Fragment>
      <h2>APP 组件reactrouter</h2>
      <Menu></Menu>
      <Route path='/' component={Home} exact></Route>
      {/* <Route path='/about' component={About} render={()=>{<About/>}}></Route> */}

      {/* <Route path='/about' render={(routeProps)=>{
        // console.log(routeProps)
        return <About {...routeProps}/>
      }}></Route> */}
      {/* <Route path='/about' children={(routeProps)=> <About {...routeProps}/>}></Route> */}
      {/* <Route path='/about' children={<About/>}></Route> */}
      <Route path='/about'> <About/> </Route>
      <hr></hr>
      <InlayPattern></InlayPattern>
      <hr></hr>
      <Route path='/form'>
        <MyForm></MyForm>
      </Route>


    </React.Fragment>
  );
}

export default App;
